<!--  -->
<template>
  <div class='xgtx'>
      
       <van-nav-bar
      title="修改昵称"
      left-text="返回"
      
      @click-left="$router.back()"
    />
    <main class="main">
      <img :src="gydz" alt="" ref="img">
    <input type="file" ref="tpxzq" @change="yltp" style="display:none">
    </main>
    <van-button type="primary" size="large" @click="xztp">选择图片</van-button>
<van-button type="info" size="large" @click="sctp">上传图片</van-button>
  </div>
</template>

<script>
import { GYDZ ,shangctup} from "network/api.js";
import { mapState ,mapMutations} from "vuex";
export default {
name:'',
  data () {
    return {
      gydz:''
    };
  },


  computed: {
    ...mapState(["userInfo"])
  },


  methods: {
    ...mapMutations(["changniche"]),
    async sctp(){
      if(this.$refs.tpxzq.files.length==0) return this.$toast("你还没选择图片")
      const fromdata=new FormData()
      fromdata.append('avatar',this.$refs.tpxzq.files[0])
      const {errcode,errmsg,data}=await shangctup(fromdata)
      if(errcode!=0) return this.$toast(errmsg)
      let{avatar}=data
      
      this.changniche({avatar})
      this.$router.push('/me')

    },
    yltp(){
      const files=this.$refs.tpxzq.files[0] //获取选取的文件
      const reader=new FileReader()   //创建读文档实例对象
      reader.readAsDataURL(files)     //转化地址
      reader.onload=()=>{             //等待破译
        this.$refs.img.src=reader.result
      }
    },
    xztp(){
      this.$refs.tpxzq.click()   //点击按钮
    }
  },
  created(){
    this.gydz=GYDZ+this.userInfo.avatar
  }
}

</script>
<style lang='less' scoped>
.main{
  height: calc(100vh - 144px);
  background: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 100px;
    height: 100px;

  }
}
</style>